<template>
	<view class="record-type-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 标题 -->
			<view class="title-wrap">
				<text class="page-title">Vaglette</text>
			</view>

			<!-- 搜索框 -->
			<view class="search-box">
				<image src="/static/search.png" class="search-icon" />
				<input class="search-input" placeholder="Value" />
			</view>

			<!-- 导出模块 -->
			<view class="export-row">
				<image src="/static/record/export.png" class="export-icon" />
				<text class="export-text">VA7585241</text>
				<text class="export-date">23/09/2025</text>
			</view>

			<!-- 选项卡 -->
			<view class="tabs">
				<view class="tab" :class="{ active: active==='type' }" @click="active='type'">TYPE</view>
				<view class="tab" :class="{ active: active==='score' }" @click="active='score'">SCORE</view>
			</view>

            <!-- 仅第一个选项卡有内容 -->
            <view v-if="active==='type'" class="grid">
                <view class="grid-item" v-for="(item, idx) in typeItems" :key="idx" @click="goProduct(idx)">
					<image :src="item.img" class="type-img" mode="aspectFit" />
					<view class="info">
						<text class="code">{{ item.code }}</text>
						<text class="name">{{ item.name }}</text>
						<text class="date">{{ item.date }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<CustomTabbar active="record" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '140rpx', '--anchor-right': '32rpx' }"
			@close="closeMenu"
			@select="closeMenu"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };
const closeMenu = () => { showMenu.value = false; };
const goBack = () => {
	uni.navigateTo({ url: '/pages/record/record-detail' });
};

const active = ref('type');
const typeItems = ref([
	{
		img: '/static/record/type1.png',
		code: '47DC85242',
		name: 'T shirt',
		date: '15/03/2025'
	},
	{
		img: '/static/record/type2.png',
		code: '46DC85241',
		name: 'T shirt',
		date: '23/09/2025'
	},
	{
		img: '/static/record/type3.png',
		code: '48DC85243',
		name: 'T shirt',
		date: '08/11/2024'
	},
	{
		img: '/static/record/type4.png',
		code: '49DC85244',
		name: 'T shirt',
		date: '12/06/2025'
	},
	{
		img: '/static/record/type5.png',
		code: '50DC85245',
		name: 'skirt',
		date: '03/08/2024'
	},
	{
		img: '/static/record/type6.png',
		code: '51DC85246',
		name: 'skirt',
		date: '29/12/2024'
	}
]);

const goProduct = (idx) => {
    if (idx === 1) {
        uni.navigateTo({ url: '/pages/record/record-product' });
    } else if (idx === 4) {
        uni.navigateTo({ url: '/pages/record/record-product?type=50DC85245' });
    }
};
</script>

<style lang="scss">
.record-type-page { min-height: 100vh; background: linear-gradient(180deg, #87CEEB 0%, #E9F9ED 100%); }
.form-scroll { margin-top: 120rpx; padding: 0 32rpx 168rpx 32rpx; box-sizing: border-box; }
.back-row { margin: 24rpx 0 0 -16rpx; width: 88rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 48rpx; height: 48rpx; }
.title-wrap { margin: 0 0 16rpx 0; }
.page-title { font-size: 44rpx; font-weight: 800; color: #0b1e2a; }
.search-box { height: 88rpx; background: #fff; border-radius: 48rpx; display: flex; align-items: center; padding: 0 24rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,.08); justify-content: center; margin: 40rpx 0 36rpx; }
.search-icon { width: 32rpx; height: 32rpx; margin-right: 12rpx; }
.search-input { flex: 1; text-align: left; font-size: 28rpx; color: #333; }

.export-row { display: flex; align-items: center; gap: 24rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-top: 40rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,.08); }
.export-icon { width: 32rpx; height: 32rpx; }
.export-text { flex: 1; color: #0b1e2a; }
.export-date { color: #0b1e2a; font-size: 24rpx; }

.tabs { display: flex; gap: 16rpx; margin: 56rpx 0 8rpx; }
.tab { padding: 12rpx 20rpx; background: #e6f0f5; color: #23323a; border-radius: 16rpx; font-weight: 800; font-size: 24rpx; }
.tab.active { background: #23323a; color: #fff; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24rpx; margin-top: -12rpx; }
.grid-item { background: #fff; border-radius: 20rpx; padding: 20rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,.08); display: flex; align-items: center; gap: 20rpx; }
.type-img { width: 112rpx; height: 112rpx; border-radius: 12rpx; background: #eef; }
.info { display: flex; flex-direction: column; }
.code { color: #0b1e2a; }
.name { color: #0b1e2a; }
.date { color: #0b1e2a; font-size: 24rpx; }
</style>


